<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="common_header" class="header">
    <!-- 头部菜单-->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid d-flex align-items-center justify-content-between">
            <!-- 左边收缩 -->
            <div class="navbar-header">
                <a href="index" class="navbar-brand">
                    <div class="brand-text brand-big visible text-uppercase">
                        <strong class="text-primary" th:text="${session.user.nickname}"></strong>
                    </div>
                    <div class="brand-text brand-sm">
                        <strong class="text-primary" th:text="${session.user.nickname}"></strong>
                    </div>
                </a>
                <button class="sidebar-toggle"><i class="fa fa-long-arrow-left"></i></button>
            </div>
            <!-- 右边菜单 -->
            <div class="right-menu list-inline no-margin-bottom">
                <!-- 博客首页-->
                <div class="list-inline-item">
                    <a href="index" target="_blank" class="nav-link">
                        <i class="fa fa-home"></i>
                        <span class="d-none d-sm-inline">博客首页</span>
                    </a>
                </div>
                <!-- 消息 -->
                <div class="list-inline-item dropdown">
                    <a id="news" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                       class="nav-link messages-toggle">
                        <i class="fa fa-commenting"></i>
                        <span class="d-none d-sm-inline">消息</span>
                        <span class="badge dashbg-1">2</span>
                    </a>
                    <!--消息展列表-->
                    <div aria-labelledby="news" class="dropdown-menu messages">
                        <a href="#" class="dropdown-item message d-flex align-items-center">
                            <div class="profile"><img th:src="@{/images/avatar.jpg}" alt="..." class="img-fluid">
                                <div class="status online"></div>
                            </div>
                            <div class="content">
                                <strong class="d-block">张三</strong>
                                <small class="date d-block">2019-11-15 15:20</small>
                            </div>
                        </a>
                        <a href="#" class="dropdown-item message d-flex align-items-center">
                            <div class="profile"><img th:src="@{/images/avatar.jpg}" alt="..." class="img-fluid">
                                <div class="status away"></div>
                            </div>
                            <div class="content">
                                <strong class="d-block">李四</strong>
                                <small class="date d-block">2019-11-15 12:20</small>
                            </div>
                        </a>
                        <!-- 查看所有消息-->
                        <a href="#" class="dropdown-item text-center message">
                            <strong>查看所有消息<i class="fa fa-angle-right"></i></strong>
                        </a>
                    </div>
                </div>

                <!-- 任务 -->
                <div class="list-inline-item dropdown">
                    <a id="task" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                       class="nav-link tasks-toggle">
                        <i class="fa fa-edit"></i>
                        <span class="d-none d-sm-inline">任务</span>
                        <span class="badge dashbg-3">2</span>
                    </a>
                    <!-- 任务列表 -->
                    <div aria-labelledby="task" class="dropdown-menu tasks-list">
                        <a href="#" class="dropdown-item">
                            <div class="text d-flex justify-content-between"><strong>任务1</strong><span>40%</span></div>
                            <div class="progress">
                                <div role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar dashbg-1"></div>
                            </div>
                        </a>
                        <a href="#" class="dropdown-item">
                            <div class="text d-flex justify-content-between"><strong>T任务2</strong><span>20%</span></div>
                            <div class="progress">
                                <div role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar dashbg-3"></div>
                            </div>
                        </a>
                        <a href="#" class="dropdown-item text-center"> <strong>查看全部任务<i class="fa fa-angle-right"></i></strong></a>
                    </div>
                </div>

                <!-- 退出 -->
                <div class="list-inline-item logout">
                    <a id="logout" href="logout" class="nav-link">
                        <i class="fa fa-power-off"></i>
                        <span class="d-none d-sm-inline">退出</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
</header>